<template>
  <div
    class="grass-situation-root"
    v-loading.fullscreen.lock="fullscreenLoading"
    element-loading-background="rgba(0, 0, 0, 0.5)"
    element-loading-text="正在查询中，请耐心等待......"
  >
    <lark-map
      ref="mmap"
      :query-back-fun="queryBackFun"
      :map-config="bufferMapConfig"
      @loaded="load"
      :before-query="beforeQuery"
      :after-query="afterQuery"
    ></lark-map>
  </div>
</template>

<script>
import mapConfig from "../../../datas/mapConfig";
import { reactive, toRefs, onMounted, ref } from "@vue/composition-api";
import {
  highlightByGeometryList,
  getGeometryListByQueryResult,
  getAttributesListByQueryResult,
  queryResultsByUrls,
  getTabsDataByQueryResult,
  unionGeometry,
  withinGeometry,
  queryByGeometry,
  openPopup,
  getMapViewState,
  getOnlyResByQueryResult,
  intersect,
  within
} from "lark-map";
import index from "./mapFunction/index";
import DataUtils from "@/utils/yc/DataUtils";
export default {
  name: "map_view",
  mixins: [index],
  data() {
    return {
      fullscreenLoading: false,
    };
  },
  setup(props, content) {
    const data = reactive({
      bufferMapConfig: mapConfig
    });
    //加载查询地图配置json数据
    DataUtils.initJsonData();
    return { ...toRefs(data) };
  },

  //方法
  methods: {
    //地图加载完成的回调
    async load(view) {
      this.initLoad(view);
    },
    //    点查回调
    async queryBackFun(res, mapPoint) {
      // let { view } = this;
      // let geometryList = getGeometryListByQueryResult({
      //   res: getOnlyResByQueryResult({ res, mapPoint }),
      //   merge: true
      // });
      // highlightByGeometryList({ view, geometryList });

      // let result = await this.test()
      //返回值是显示弹出窗口内容，可以返回数据或者dom节点
      return "555";
    },
    beforeQuery() {},
    afterQuery() {},
    destory() {
      this.view.destory();
    }
  }
};
</script>

<style scoped lang="scss">
$full: 100%;
.grass-situation-root {
  height: $full;
  width: $full;
}
</style>
